﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" Inherits="Comkarl.Web.UI.Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <fieldset id="helloWorldAndAlert" class="control-sample">
        <legend>HelloWorldAndAlert control</legend>

        <div class="description">
            <p>This control renders "Hello world!" text from the server code.</p>
            <p>Client-side script control binds a <strong>click</strong> event to the rendered HTML element using pure <strong>jQuery</strong>. Click's handler
            raises a <strong>window.alert()</strong> saying "I did it!".</p>
            
            <p>In order to test this control, <strong>click on text bellow!</strong></p>

            <div class="executable-control">
                <calipso:HelloWorldAndAlert ID="ctrlHelloWorldAndAlert" JavaScriptManagerId="masterJavaScriptManager" CssManagerId="masterCssManager" runat="server" />
            </div>
        </div>
    </fieldset>

    <fieldset id="localizedHelloWorldAndAlert" class="control-sample">
        <legend>LocalizedHelloWorldAndAlert control</legend>

        <div class="description">
            <p>This control renders "Hello world!" text from the server code.</p>
            <p>Client-side script control binds a <strong>click</strong> event to the rendered HTML element using pure <strong>jQuery</strong>. Click's handler
            raises a <strong>window.alert()</strong> saying "I did it!".</p>

            <p>Main difference between this control and previous <strong>HelloWorldAndAlert</strong> control is this one renders text using localization.</p>
            
            <p>In order to test this control, <strong>click on text bellow!</strong></p>

            <div class="executable-control">
                <calipso:LocalizedHelloWorldAndAlert ID="ctrlLocalizedHelloWorldAndAlert" JavaScriptManagerId="masterJavaScriptManager" CssManagerId="masterCssManager" runat="server" />
            </div>
        </div>
    </fieldset>

    <fieldset id="jsonClientProperty" class="control-sample">
        <legend>JsonClientProperty control</legend>

        <div class="description">
            <p>
                JsonClientProperty control configures a client property from the server-side control's code called <strong>ShopItemList</strong>. The property will contain
                a JSON-serialized list of shopping items.
            </p>
            <p>
                Later, client-side JavaScript control's part receives this client property, deserializes JSON-serialized shopping items and renders them as an ordered list (<strong>&lt;ol /&gt;</strong>)!
            </p>

            <div class="executable-control">
                <calipso:JsonClientProperty ID="ctrlJsonClientProperty" ParentElementSelector="#jsonClientProperty .executable-control" JavaScriptManagerId="masterJavaScriptManager" CssManagerId="masterCssManager" runat="server" />
            </div>

            <p>Note that this is just a sample. Client properties should be used to send inmutable values or objects to client-side part of controls, rather than variable ones. A shop item list
                may be variable. Once ASP.NET Calipso compilation is executed in release mode, further updates to shopping list would not take effect, because client property auto-generated JavaScript
                is created once. 
            </p>
        </div>
    </fieldset>

    <fieldset id="sampleControl" class="control-sample">
        <legend>SampleControl</legend>
        <calipso:SampleControl ID="ctrlSampleControl" ParentElementSelector="#sampleControl" JavaScriptManagerId="masterJavaScriptManager" CssManagerId="masterCssManager" runat="server" />
    </fieldset>

    <fieldset id="osInfo" class="control-sample">
        <legend>OSInfo</legend>
        <calipso:OSInfo ID="ctrlOSInfo" ParentElementSelector="#osInfo" JavaScriptManagerId="masterJavaScriptManager" CssManagerId="masterCssManager" runat="server" />
    </fieldset>
</asp:Content>
